import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import { Pie, measureTextWidth } from '@ant-design/plots';
import styles from './index.less'

export type pieProps = {
    height?: number;
    data: { type: string,value: number}[];
  };

const PieChart :React.FC<pieProps> = (props) => {
    let height = props.height
    let data  = props.data
    function renderStatistic(containerWidth, text, style) {
        const { width: textWidth, height: textHeight } = measureTextWidth(text, style);
        const R = containerWidth / 2; // r^2 = (w / 2)^2 + (h - offsetY)^2
    
        let scale = 1;
    
        if (containerWidth < textWidth) {
          scale = Math.min(Math.sqrt(Math.abs(Math.pow(R, 2) / (Math.pow(textWidth / 2, 2) + Math.pow(textHeight, 2)))), 1);
        }
    
        const textStyleStr = `width:${containerWidth}px;`;
        return `<div style="${textStyleStr};font-size:${scale}em;line-height:${scale < 1 ? 1 : 'inherit'};">${text}</div>`;
      }
      const config = {
        appendPadding: 0,
        data,
        angleField: 'value',
        colorField: 'type',
        radius: 0.6,
        innerRadius: 0.5,
        meta: {
          value: {
            formatter: (v) => `${v} ¥`,
          },
        },
        legend: {
            layout: 'horizontal',
            position: 'top',
            padding:[10,10,10,10],
            flipPage:false,
          },
        label: {
            type: 'spider',
            labelHeight: 1,
            style: {
                textAlign: 'center',
            },
           autoRotate: true,
           content: '{name}{percentage}',
        },
        tooltip: {
            formatter: (datum: Datum) => {
                return { name: datum.type, value: datum.value };
              },
          },
        statistic: {
          title: {
            offsetY: -4,
            customHtml: (container, view, datum) => {
              const { width, height } = container.getBoundingClientRect();
              const d = Math.sqrt(Math.pow(width / 2, 2) + Math.pow(height / 2, 2));
              const text = datum ? datum.type : '总计';
              return renderStatistic(d, text, {
                fontSize: 22,
              });
            },
          },
          content: {
            offsetY: 4,
            style: {
              fontSize: '18px',
            },
            customHtml: (container, view, datum, data) => {
              const { width } = container.getBoundingClientRect();
              const text = datum ? `¥ ${datum.value}` : `¥ ${data.reduce((r, d) => r + d.value, 0)}`;
              return renderStatistic(width, text, {
                fontSize: 18,
              });
            },
          },
        },
        // 添加 中心统计文本 交互
        interactions: [
            { type: 'tooltip'},
        //   {
        //     type: 'element-selected',
        //   },
        //   {
        //     type: 'element-active',
        //   },
        //   {
        //     type: 'pie-statistic-active',
        //   },
        ],
      };
      return (
        <div style={{ height:height,width:'100%' }}>
          {
            height>0 && data.length>0 &&
            <Pie {...config} />
          }
        </div>
      );
  };
  export default PieChart;

